<template>
  <div class="login-form">
      <div class="g-form">
         <div class="g-form-line">
             <span class="g-form-label">用户名：</span>
             <div class="g-form-input">
                <input type="text" v-model="usernameModel" placeholder="请输入用户名"/>
             </div>
             <!--验证功能 -->
             <span class="g-form-error">{{userErrors.errorText}}</span>
         </div>
         <div class="g-form-line">
             <span class="g-form-label">密码：</span>
             <div class="g-form-input">
                <input type="password" v-model="passwordModel" placeholder="请输入密码" />
             </div>
             <!--验证功能 -->
             <span class="g-form-error">{{passwordErrors.errorText}}</span>
         </div>
         <div class="g-form-line">
            <div class="g-form-btn">
                <a class="button" @click="onLogin">登录</a>
            </div>
         </div>  
        <p>{{errorText}}</p>  
      </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            usernameModel:'',
            passwordModel:'',
            errorText:''
        }
    },
    computed:{
        //通过计算属性关联v-model的变化
        userErrors(){
            //通过正则校验
            let errorText,status;
            if(!/@/g.test(this.usernameModel)){
                status = false;
                errorText = '不包含@';
            }else{
                status = true;
                errorText = ''
            }
            //第一次隐藏错误提示，输入的时候才进行校验提示
            if(!this.userFlag){
                errorText = ''; //注意不是this.errorText
                this.userFlag = true;
            }
          
            return{
                status,
                errorText
            }
        },
        passwordErrors(){
            let errorText,status;
            if(!/^\w{1,6}$/g.test(this.passwordModel)){
                status = false;
                errorText = '请输入1-6位的密码'
            }else{
                status = true;
                errorText = '';
            }
            //第一次隐藏错误提示，输入的时候才进行校验提示
            if(!this.passwordFlag){
                errorText = ''; //注意不是this.errorText
                this.passwordFlag = true;
            }
            return{
                status,
                errorText
            }
        }

    },
    methods:{
        onLogin(){
           // console.log(this.usernameModel + '  ' + this.passwordModel);
           if(!this.userErrors.status || !this.passwordErrors.status){
               this.errorText = '请检测输入的内容';
           }else{
               //登录
                this.errorText = '';
               console.log('logining....');
               //使用express自带的post请求
               this.$http.post('/api/login',{

               }).then((res) => {
                   //将子组件的数据传递父组件
                   console.log(res);
                   this.$emit('has-log',res.data);
               },(error) =>{
                   console.log(error);
               })
           }
        }
    }
}
</script>